<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta th:include="~{layout/head_xadmin :: content}">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/admin">首页</a>
            <a href="#">权限管理</a>
            <a>
              <cite>用户管理</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()"
     title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <div class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input type="text" id="search" placeholder="输入账号或者名称搜索" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button onclick="search()" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
            </div>
          </div>
        </div>

        <div class="layui-card-header">
          <button class="layui-btn" onclick="add()"><i class="layui-icon"></i>添加角色</button>
          <button class="layui-btn" onclick="xadmin.open('添加用户','./member-add.html',600,400)"><i
              class="layui-icon"></i>导出
          </button>
        </div>

        <table id="user-table" lay-filter="userTable"></table>
        <script type="text/html" id="barTool">
          <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="rolePermission">授权</a>
        </script>

      </div>
    </div>
  </div>
</div>
</body>
<script>
  var table
  layui.use(['table', 'layer', 'jquery'], function () {
    table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;

    table.render({
      elem: '#user-table'
      , height: 475
      , id: 'userTableId'
      , url: '/admin/user/list' //数据接口
      , where: {"search": $('#search').val()}
      , page: true //开启分页
      , cols: [
        [ //表头
          {field: 'id', title: 'ID', width: 70, sort: true, fixed: 'left'}
          , {field: 'username', title: '账号', width: 200, sort: true}
          , {field: 'nickname', title: '昵称', width: 200, sort: true}
          , {
          field: 'status', title: '状态', width: 80, sort: true, templet: function (data) {
            if (data.status == 1) {
              return '有效';
            } else {
              return "无效";
            }
          }
        }
          , {field: 'createTime', title: '创建时间', width: 170, sort: true}
          , {field: 'updateTime', title: '修改时间', width: 170, sort: true}
          , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barTool'}
        ]
      ]
      , parseData: function (res) { //res 即为原始返回的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
      , limits: [10, 20, 50]
    });

    //监听工具条
    table.on('tool(userTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      if (layEvent === 'detail') { //查看
        $.ajax({
          data:{'userId':data.id},
          url:'/admin/user/info',
          success:function (data) {
            let info=data.data
            layer.open({
              title: '详细信息'
              , content: 'ID：' + info.id + '<br>账号：<br>' + info.username + '<br>昵称：<br>' + info.nickname
                + '<br>状态：<br>' + (info.status==1?'有效':'无效')
                + '<br>创建时间：<br>' + info.createTime + '<br>更新时间：<br>' + info.updateTime
            });
          }
        })
      } else if (layEvent === 'edit') { //编辑
        layer.open({
          title: '编辑用户'
          , content: '密码：<br>' +
            '<input type="password" id="password" autocomplete="off" class="layui-input">' +
            '确认密码：<br>' + '<input type="password" id="cpassword" autocomplete="off" class="layui-input">'
          , yes: function (index, layero) {
            $.ajax({
              data: {'userId':data.id,'password': $('#password').val(), 'cpassword': $('#cpassword').val()},
              url: '/admin/user/update',
              type: 'post',
              sync: false,
              success: function (data) {
                if (data.code == 0) {
                  //reloadTable()
                  layer.msg(data.message)
                  layer.close(index)
                } else {
                  alert(data.message)
                }
              }
            })
          }
        });
      } else if (layEvent === 'del') {

      } else if (layEvent === 'rolePermission') {
        xadmin.open('菜单授权', '/admin/permission/role?userId=' + data.id, 320, 500)
      }
    });
  });

  function reloadTable(op) {
    if (op) {
      table.reload('roleTableId', op);
    } else {
      table.reload('roleTableId')
    }
  }

  function search() {
    var search = $('#search').val()
    if (!search) {
      layer.msg('请输入要搜索的内容！')
      return;
    }
    reloadTable({
      url: '/admin/role/list'
      , where: {"search": search}
    })
  }
</script>
</html>
